<template>
  <Draggable
    v-model="fieldMenuList"
    :group="{ name: 'fields', pull: 'clone', put: false, sort: false }"
    :sort="false"
    @start="drag = true"
    @end="drag = false"
    item-key="type"
  >
    <template #item="{ element }">
      <a-tag color="#f6f7ff" :data-comp-type="element.type" class="menu-item">
        {{ element.title }}
      </a-tag>
    </template>
  </Draggable>
</template>

<script setup>
import Draggable from "vuedraggable";
import { fieldMenuList } from "@/components/RuntimeComp";
</script>

<style lang="less" scoped>
.ant-tag {
  //   margin: 0;
  width: 45%;
  text-align: center;
  color: #333;
  padding: 5px 0;
  margin-bottom: 10px;
}
</style>
